<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 第一个分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;margin-top: 28rpx;"></view>

		<!-- 商品信息 -->
		<view style="width: 702rpx;display: flex;justify-content: space-between;margin-top: 20rpx;">
			<image mode="aspectFill" style="width: 200rpx;height: 200rpx;" :src="carobj.image"></image>
			<view style="width: 482rpx;height: 200rpx; display: flex;flex-direction: column;justify-content: space-between;">
				<text
					style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
				font-size: 30rpx;color: #333333;line-height: 60rpx;"
				>
					{{ carobj.title }}
				</text>
				<text style="font-size: 28rpx;color: #F07203;">￥{{ carobj.price }}</text>
			</view>
		</view>

		<!-- 信息输入区域 -->
		<!-- 姓名输入框 -->

		<view
			style="width: 702rpx;height: 80rpx;margin-top: 32rpx;border: 1px solid #EDEEF5;display: flex;justify-content: center;align-items: center;"
		>
			<input
				placeholder="请输入姓名"
				v-model="obj.name"
				placeholder-class="inputclass"
				style="width: 654rpx;font-size: 28rpx;color: #333333;"
			/>
		</view>

		<!-- 电话输入框 -->
		<view
			style="width: 702rpx;height: 80rpx;margin-top: 32rpx;border: 1px solid #EDEEF5;display: flex;justify-content: center;align-items: center;"
		>
			<input
				placeholder="请输入电话号码"
				v-model="obj.phone"
				type="number"
				placeholder-class="inputclass"
				style="width: 654rpx;font-size: 28rpx;color: #333333;"
			/>
		</view>

		<!-- 姓名输入框 -->

		<view
			style="width: 702rpx;height: 80rpx;margin-top: 32rpx;border: 1px solid #EDEEF5;display: flex;justify-content: center;align-items: center;"
		>
			<picker mode="date" :value="carobj.date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input
					placeholder="请选择预约时间"
					placeholder-class="inputclass"
					:value="obj.date"
					disabled="true"
					style="width: 654rpx;font-size: 28rpx;color: #333333;"
				/>
			</picker>
		</view>

		<view
			style="width: 702rpx;height: 80rpx;margin-top: 32rpx;border: 1px solid #EDEEF5;display: flex;justify-content: center;align-items: center;"
		>
			<input
				placeholder="请输入维修内容备注"
				v-model="obj.remarks"
				type="text"
				placeholder-class="inputclass"
				style="width: 654rpx;font-size: 28rpx;color: #333333;"
			/>
		</view>

		<!-- <view class="input-center1 padding  ">
			<textarea placeholder-style="color:#F76260" v-model="obj.remarks" placeholder="请输入维修内容备注(100字以内)" />
		</view> -->
		<view class=" padding" v-if="carobj.title == '保险'" style="width: 100vw;">
			<view class="flex-box">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					客户姓名
				</view>
				<view class="">
					<input type="text" v-model="obj.client_name" placeholder="请输入客户姓名" style="float: right;text-align: right;" />
				</view>
			</view>
			<view class="flex-box">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					客户联系电话
				</view>
				<view class="">
					<input type="text" v-model="obj.client_phone" placeholder="请输入客户联系电话" style="float: right;text-align: right;" />
				</view>
			</view>
			<view class="flex-box">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					保险公司名称
				</view>
				<view class="">
					<input type="text" v-model="obj.company" placeholder="请输入保险公司名称" style="float: right;text-align: right;" />
				</view>
			</view>
			<view class="flex-box">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					保险生效时间
				</view>
				<view class=""><input type="text" v-model="obj.attime" placeholder="请输入生效时间" style="float: right;text-align: right;" /></view>
			</view>
			
			<view class="flex-boxx">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					行驶证正反面
				</view>
				<view class="flex"><u-upload :action="action" :max-count="2" @on-success="success1"></u-upload></view>
			</view>
			
			
			<view class="flex-boxx">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					行驶证正页
				</view>
				<view class="flex"><u-upload :action="action" :max-count="1" @on-success="success2"></u-upload></view>
			</view>
			<view class="flex-boxx">
				<view class="">
					<text style="color: #FF0000; margin-right: 10rpx;">*</text>
					行驶证附页
				</view>
				<view class="flex"><u-upload :action="action" :max-count="1" @on-success="success3"></u-upload></view>
			</view>
			
			
			
			
			
			
		</view>

		<!-- 底部按钮 -->
		<view
			style="width: 100%;height: 80rpx;background-color: #4B9EFF;position: fixed;bottom: 0rpx;
		text-align: center;line-height: 80rpx;font-size: 28rpx;color: #FFFFFF;"
			@click="GO('orderDetails')"
		>
			创建订单
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			action: 'http://qiche.qianjiwl.xyz/addons/shopro/index/upload',
			user_couponesid: '', //存优惠劵id
			startDate: '2020-01-01',
			endDate: '2025-01-01',
			amountt: '', //存优惠劵金额
			id: '', //颜色id
			carid: '', //选好的车id
			carobj: {},
			obj: {
				date: '',
				phone: '',
				name: '',
				remarks: '',
				client_name: '',
				client_phone: '',
				company: '',
				attime: '',
				remarks: '',
				order_imge:''
			},
			images1:[],
			images2:[],
			images3:[],
		};
	},
	onLoad() {
		this.carobj = this.$Route.query.obj;
		this.carid = this.$Route.query.carid;
		this.id = this.$Route.query.id;
		//上面姓名 时间 id 下面优惠劵 id和金额
		this.user_couponesid = this.$Route.query.user_coupons_id;
		this.amountt = this.$Route.query.amountt;

		console.log('this.carobj: 车辆页面数据', this.carobj);
		console.log('this。carid:选好的车id ', this.carid);
		console.log('this.id: 颜色id', this.id);
		console.log('this.user_couponesid: 优惠劵id，', this.user_couponesid);
	},
	methods: {
		success1(e){
			
			 this.images1.push(e.data.url) 
			 
		},
		success2(e){
			this.images2 = e.data.url
			 
		},
		success3(e){
			this.images3 = e.data.url
			 
		},
		bindDateChange(e) {
			this.obj.date = e.detail.value;
		},
		async GO(type) {
			this.obj.order_imge = `${this.images1[0]},${this.images1[1]},${this.images2},${this.images3}`
			console.log("this.obj.order_imge0000000: ",this.obj.order_imge);
			const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
			if (this.obj.phone == '' || this.obj.phone.length <= 10 || !reg.test(this.obj.phone)) {
				uni.$showMsg('请输入正确手机号');
				return false;
			} else {
			}
			if (!this.obj.date) return uni.$showMsg('请选择预约时间');
			if (!this.obj.name) return uni.$showMsg('请填写预约人姓名');
			if (!this.obj.remarks) return uni.$showMsg('请填写完整');
			// if (!this.obj.client_name) return uni.$showMsg('请填写完整');
			// if (!this.obj.client_phone) return uni.$showMsg('请填写完整');
			// if (!this.obj.company) return uni.$showMsg('请填写完整');
			// if (!this.obj.attime) return uni.$showMsg('请填写完整');
			// if (!this.obj.remarks) return uni.$showMsg('请填写完整');
			
		
			
			// 接口返回
			let res;
			try {
				res = await this.$request.post('addons/shopro/order/pre', {
					data: {
						goods_list: [
							{
								goods_id: this.id,
								goods_num: 1,
								sku_price_id: this.carid,
								goods_price: this.carobj.price,
							},
						],
						coupons_id: this.user_couponesid,
					},
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			let obj = this.obj;
			this.$Router.push({
				name: type,
				params: {
					carobj: this.carobj,
					obj: this.obj,
					carid: this.carid,
					id: this.id,
					user_coupons_id: this.user_couponesid,
					amountt: this.amountt,
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.input-center1 {
	// padding-top: 20rpx;
	width: 100%;
	height: 500rpx;

	input {
		width: 100%;
		height: 100%;
	}
}
.inputclass {
	font-size: 28rpx;
	color: #999999;
}

.flex-box {
	height: 90rpx;
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #eeeeee;
}
.flex-boxx {
	//height: 90rpx;//
	margin-top: 25rpx;
	display: flex;
	flex-direction: column;
	border-bottom: 1rpx solid #eeeeee;
}
.model {
	.model-info {
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin: 10rpx 0;
		background-color: #eeeeee;
	}
}
</style>
